<%--
  Created by IntelliJ IDEA.
  User: User
  Date: 2021/5/23
  Time: 19:44
  总账单的查询
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    //获取项目的根路径
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<html>
<head>
    <title>Title</title>
    <style type="text/css">
        .ziti {
            font-size: 20px;
            position: absolute;
            top: 80px;
            left: 600px;

        }

        .ziti span {
            display: inline-block;
            border-bottom: 1px solid #000000;
            width: 100px;
            text-align: center;
            line-height: 30px;
            height: 30px;
            color: red;

        }

        .ziti, canvas {
            margin: 200px auto;
        }

        #xiangxi {
            border: 1px solid #0bc9be;
            display: inline-block;
            width: 100px;
            height: 30px;
            color: #0bc9be;
            text-align: center;
            background-color: white;
        }
    </style>
</head>
<body>

<canvas id="canvas_circle" width="600" height="300">
    浏览器不支持canvas
</canvas>

<div class="ziti">
    <div>药品费用：<span>${arr[0]}</span>￥</div>
    <div>挂号费用：<span>${arr[1]}</span>￥</div>
    <div>检查费用：<span>${arr[2]}</span>￥</div>
    <div>
        总&nbsp;&nbsp;收&nbsp;&nbsp;入：<span>${arr[3]}</span>￥
        <a style="margin-left: 20px"><a href="<%=basePath%>Consume/pageconsume">
            <button type="button" id="xiangxi">详情</button>
        </a></a>
    </div>
</div>

<script type="text/javascript">
    window.onload = function init() {
//绘制饼图

        var drugprice =
        ${arr[0]}
        var guahaoprice =
        ${arr[1]}
        var checkprice =
        ${arr[2]}
        var zongjia =
        ${arr[3]}


        //得到药品价格的比列
        var drug = drugprice / zongjia
        var guahao = guahaoprice / zongjia
        var check = checkprice / zongjia


        var data_arr = [check, drug, guahao];
        var color_arr = ["#26b899", "#b370cf", "#1abeef"];
        var text_arr = ["检查", "药品", "挂号"];
        drawCircle("canvas_circle", data_arr, color_arr, text_arr);


        //绘制饼图
        function drawCircle(canvasId, data_arr, color_arr, text_arr) {
            var c = document.getElementById(canvasId);
            var ctx = c.getContext("2d");

            var radius = c.height / 2 - 20; //半径
            var ox = radius + 20, oy = radius + 20; //圆心

            var width = 25, height = 15; //图例宽和高
            var posX = ox * 2 + 20, posY = 70;   //
            var textX = posX + width + 10, textY = posY + 15;

            var startAngle = 0; //起始弧度
            var endAngle = 0;   //结束弧度
            for (var i = 0; i < data_arr.length; i++) {
                //绘制饼图
                endAngle = endAngle + data_arr[i] * Math.PI * 2; //结束弧度
                ctx.fillStyle = color_arr[i];
                ctx.beginPath();
                ctx.moveTo(ox, oy); //移动到到圆心
                ctx.arc(ox, oy, radius, startAngle, endAngle, false);
                ctx.closePath();
                ctx.fill();
                startAngle = endAngle; //设置起始弧度

                //绘制比例图及文字
                ctx.fillStyle = color_arr[i];
                ctx.fillRect(posX, posY + 40 * i, width, height);
                ctx.moveTo(posX, posY + 40 * i);
                ctx.font = '18px 微软雅黑';    //斜体 30像素 微软雅黑字体
                ctx.fillStyle = color_arr[i]; //"#000000";

                var percent = text_arr[i] + "：" + (100. * data_arr[i]).toFixed(2) + "%";
                ctx.fillText(percent, textX, textY + 40 * i);
            }
        }
    }
</script>
</body>
</html>
